<template>
  <div>
    <el-button type="text" @click="saveUI"> 添加 </el-button>
    <el-dialog title="权限" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="父权限" :label-width="formLabelWidth">
          <el-select
            ref="selector"
            v-model="form.parentId"
            placeholder="请选择父权限"
          >
            <el-option
              v-for="(p, index) in flatPermissions"
              :key="index"
              :value="p.permissionId"
              :label="p.permissionName"
              style="display: none"
            >
              {{ p.permissionName }}
            </el-option>
            <el-tree
              ref="tree"
              :data="treeData"
              :props="treeProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-select>
        </el-form-item>
        <el-form-item label="权限名称" :label-width="formLabelWidth">
          <el-input v-model="form.permissionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" :label-width="formLabelWidth">
          <el-radio-group
            v-model="form.permissionType"
            @change="changePermissionType"
          >
            <el-radio :label="'M'">目录</el-radio>
            <el-radio :label="'C'">菜单</el-radio>
            <el-radio :label="'F'">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="路由地址"
          :label-width="formLabelWidth"
          v-if="pathInputVisiable"
        >
          <el-input v-model="form.path"></el-input>
        </el-form-item>
        <el-form-item
          label="组件位置"
          :label-width="formLabelWidth"
          v-if="componentInputVisiable"
        >
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item
          label="权限字符"
          :label-width="formLabelWidth"
          v-if="exprInputVisiable"
        >
          <el-input v-model="form.permissionExpr"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
      </div>
    </el-dialog>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="permissionId"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="permissionName" label="权限名" >
      </el-table-column>
      <el-table-column prop="component" label="组件" >
      </el-table-column>
      <el-table-column prop="path" label="路径" > </el-table-column>
      <el-table-column prop="permissionType" label="类型" >
      </el-table-column>
      <el-table-column prop="permissionExpr" label="权限表达式" >
      </el-table-column>
      <el-table-column label="操作"  width="180">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)">删除</el-button>
          <el-button @click="updateUI(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  findPermissionTree,
  findFlatPermissions,
  saveOrUpdatePermission,
  deletePermission,
} from "@/api/permission/permission.js";
export default {
  mounted() {
    this.getTree();
    this.getFloatPermissions();
    this.backupFrom = JSON.parse(JSON.stringify(this.form));
  },
  data() {
    return {
      pathInputVisiable: true,
      componentInputVisiable: false,
      exprInputVisiable: false,
      dialogFormVisible: false,
      formLabelWidth: "180px",
      tableData: [],
      treeData: [],
      flatPermissions: [],
      permissionType: 1,
      form: {
        parentId: -1,
        permissionType: "M",
      },
      backupFrom: {},
      treeProps: {
        children: "children",
        label: "permissionName",
      },
    };
  },
  methods: {
    submitForm() {
      saveOrUpdatePermission(this.form).then((r) => {
        this.getTree();
        this.getFloatPermissions();
        this.dialogFormVisible = false;
        this.form = this.backupFrom;
      });
    },
    changePermissionType(value) {
      if (value == "M") {
        this.exprInputVisiable = false;
        this.componentInputVisiable = false;
        this.pathInputVisiable = true;
        return;
      }
      if (value == "C") {
        this.exprInputVisiable = true;
        this.componentInputVisiable = true;
        this.pathInputVisiable = true;
        return;
      }
      if (value == "F") {
        this.exprInputVisiable = true;
        this.componentInputVisiable = false;
        this.pathInputVisiable = false;
        return;
      }
    },
    handleNodeClick(permission) {
      this.form.parentId = permission.permissionId;
      this.$refs.selector.blur();
      this.$forceUpdate();
    },
    getTree() {
      findPermissionTree().then((r) => {
        let arr = [r.data];
        this.tableData = arr;
        this.treeData = arr;
      });
    },
    getFloatPermissions() {
      findFlatPermissions().then((r) => {
        this.flatPermissions = r.data;
      });
    },
    del(row) {
      this.$confirm("确认删除?")
        .then(() => {
          deletePermission(row.permissionId).then((r) => {
            if (r.code == 200) {
              this.getTree();
              return;
            }
            this.$message.error(r.msg);
          });
        })
        .catch(() => {});
    },
    updateUI(row) {
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(row));
    },
    saveUI() {
      this.dialogFormVisible = true;
    },
  },
};
</script>

<style>
</style>